<template>
	<scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
		<view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
			<xlm-top-nav :scrollTop="scrollTop" :leftIconColor="'#fff'" :titleColor="'#fff'" :textAlign="'center'"
				title="成绩" :showGoBack="false" />
			<scroll-view scroll-y class="scroll-view-content">
				<view class="score-page">
					<!-- 搜索框 -->
					<view class="search-bar">
						<image class="search-icon" :src="imgUrl + 'search-icon.png'" />
						<input class="search-input" type="text" v-model="search" placeholder="搜索赛站名称"
							placeholder-class="search-placeholder" />
						<view v-if="search" class="clear-btn" @tap.stop="clearSearch">
							<text class="clear-icon">×</text>
						</view>
					</view>

					<!-- 推广Banner -->
					<view class="promo-banner">
						<BannerSwiper :images="bannerImages" />
					</view>

					<!-- 赛事列表 -->
					<view class="event-list">
						<view v-for="(event, idx) in filteredEvents" :key="idx" class="event-card"
							@tap="onEventClick(event)">
							<image class="event-img" :src="event.master_image" mode="aspectFill" />
							<view class="event-info">
								<view class="event-title">{{ event.name }}</view>
								<view class="event-details">
									<view class="detail-row">
										<image class="icon" :src="imgUrl + 'clock@2x.png'" />
										<text>比赛日期:
											{{ formatTime(event.competition_time) }}　{{ getEventTypeText(event.type) }}</text>
									</view>
									<view class="detail-row">
										<image class="icon" :src="imgUrl + 'location3@2x.png'" />
										<text>比赛地址: {{ event.address }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>


			</scroll-view>
			<view style="height: 200rpx"></view>
			<XlmExpressTabbar :current="2" />
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		useOutsideAppStore
	} from '@/store/app'
	import {
		imgUrl
	} from '@/utils/config'
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		useRequest
	} from '@/api';
	// import GroupItem from '@/components/GroupItem/index.vue'
	// import ClubList from '@/components/ClubList/index.vue'
	// import ScheduleList from '@/components/ScheduleList/index.vue'
	// import ResultList from '@/components/ResultList/index.vue'
	import BannerSwiper from '@/components/BannerSwiper/BannerSwiper.vue'
	import XlmExpressTabbar from '@/components/XlmExpressTabbar/index.vue';
	import {
		getEventStatusText,
		getEventTypeText
	} from '@/utils/statusUtils.js'
	import {
		formatTime
	} from '@/utils/dateUtils.js'
	const {
		API_SCORE_INDEX_POST,
		API_HOME_EVENT_POST
	} = useRequest();
	const appStore = useOutsideAppStore()
	const navHeight = computed(() => appStore.navHeight)
	const scrollTop = ref(0)
	const onPageScroll = (e) => {
		scrollTop.value = e.detail.scrollTop
	}

	const search = ref('')
	const events = ref([])
	onShow(() => {
		getScoreList();
	})

	const getScoreList = async () => {
		let params = {
			page: 1,
			page_size: 1000,
			lng: uni.getStorageSync('latitude'),
			lat: uni.getStorageSync('longitude')
		}
		// events.value = [];
		try {

			// const res = await API_SCORE_INDEX_POST(params)
			const res = await API_HOME_EVENT_POST(params)
			console.log('getScoreList', res)

			if (res.code === 1) {
				if (res.data.data.length > 0) {
					events.value = res.data.data;
				} else {
					events.value = [];
				}
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
			console.log('events', events.value);

		} catch (error) {
			uni.showToast({
				title: error.message,
				icon: 'none'
			})
		}
	}
	const filteredEvents = computed(() => {
		if (!search.value) return events.value
		return events.value.filter(e => e.name.includes(search.value))
	})
	// 清除搜索内容
	const clearSearch = () => {
		search.value = ''
		// 收起键盘，避免看起来未清空的错觉
		if (typeof uni !== 'undefined' && uni.hideKeyboard) {
			uni.hideKeyboard()
		}
	}

	function onEventClick(event) {
		// 跳转到成绩详情页
		uni.navigateTo({
			url: `/pages/ScoreDetail/index?event_id=${event.id}`
		})
		
	}

	const bannerImages = [
		imgUrl + 'a.jpg',
		imgUrl + 'b.jpg',
		imgUrl + 'c.jpg'
	]
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>
<style>
</style>